<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聚衣商城</title>
    <link rel="stylesheet" href="../../lib/css/reset.min.css">
    <link rel="stylesheet" href="../../css/all.min.css">

    <link rel="stylesheet" href="../../lib/css/elementui.min.css">
    <link rel="stylesheet" href="../../lib/css/fonts/element-icons.ttf">
    <link rel="stylesheet" href="../../lib/css/fonts/element-icons.woff">
</head>

<body>
    <div class="app-wrap" v-cloak id="order_list">
        <header-top></header-top>
        <user-top></user-top>
        <div class="bg-gray">
            <div class="container userCenter clear">
                <leftnav navtext="我的订单"></leftnav>
                <div class="save_content">
                    <ul class="tabs order_list">
                        <li class="li-tab" v-for="(item,index) in orderList_tabs" @click="toggleTabs(index)" :class="{active:index!=nowIndex}">
                            <span>{{item}}</span>
                        </li>
                    </ul>
                    <div class="divTab shop_tabs" v-show="nowIndex===0">
                        <div class="search-top">
                            <input class="input_top" v-model="keyword" type="text" placeholder="商品名称或订单号">
                            <button class="btn-search" @click="search">订单搜索</button>
                        </div>
                        <div class="orderList_list">
                            <div class="orderList_title">
                                <ul class="clear">
                                    <li>商品</li>
                                    <li>商品价格</li>
                                    <li>数量</li>
                                    <li>面料收货人</li>
                                    <li>实付款</li>
                                    <li>定制收货人</li>
                                    <li>交易状态</li>
                                    <li>操作</li>
                                </ul>
                            </div>
                            <div class="checkAll">
                                <span class="checkbox"></span> 全选 <button class="checkAll_btn"> 合并付款 </button>
                            </div>
                            <div class="orderList_item" v-for="(order,oindex) in orderData">
                                <div class="orderList_item_title">
                                    <span class="checkbox"></span>
                                    <span class="date"> {{order.createTime}}</span>
                                    <span class="number">订单编号：{{order.orderNumber}}</span>
                                    <span class="goods_name">{{order.shopName}}<i class="icon-login_qq"></i></span>
                                </div>
                                <div class="orderList_item_con"  v-for="(product,pindex) in order.orderProducts">
                                    <ul class="clear">
                                        <li>
                                            <div class="goods_img">
                                                <img :src="product.picImg" alt="">
                                            </div>
                                            <div class="goods_name">
                                                <p>{{product.name}}</p>
                                            </div>
                                        </li>
                                        <li class="price">￥{{product.productPrice}}</li>
                                        <li class="number">{{product.buyNumber}}</li>
                                        <li class="name">{{order.userName}}</li>
                                        <li class="price1">￥{{product.productAmount}}</li>
                                        <li></li>
                                        <li class="cursor">
                                            <p v-if="order.orderStatus == 1">等待付款</p>
                                            <p v-if="order.orderStatus == 4">等待收货</p>
                                            <p v-if="order.orderStatus == 6">已完成</p>
                                            <p v-if="order.orderStatus == 11">取消订单</p>
                                            <p v-if="order.orderStatus == 12">自动关闭</p>
                                            <p @click="getOrderInfo(order.orderId)">订单详情</p>
                                            <p v-if="order.orderStatus != 1 && order.orderStatus != 11 && order.orderStatus != 12">物流信息</p>
                                        </li>
                                        <li>
                                            <div class="groups">
                                                <a href="javascript:;" class="btns" v-if="order.orderStatus == 1" @click="buyOrder(order.orderPayNumber)">付款</a>
                                                <a href="javascript:;" class="btns" @click="clearOrder(order.orderNumber)" v-if="order.orderStatus == 1">取消订单</a>
                                                <a href="javascript:;" class="btns" @click="okOrder(order.orderNumber)" v-if="order.orderStatus == 2 || order.orderStatus == 4 ">确认收货</a>
                                                <a href="javascript:;" class="btns" @click="appraiseOrder(order.orderId)" v-if="order.orderStatus == 6 ">评价</a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <common-page :current="current" :all="countSize" @btn-click="listen"></common-page>
                    </div>
                    <!-- tb1 end -->

                    <div class="divTab shop_tabs" v-show="nowIndex===1">
                        <div class="search-top">
                            <input class="input_top" type="text" placeholder="商品名称或订单号">
                            <button class="btn-search">订单搜索</button>
                        </div>
                        <div class="orderList_list">
                            <div class="orderList_title">
                                <ul class="clear">
                                    <li>商品</li>
                                    <li>商品价格</li>
                                    <li>数量</li>
                                    <li>面料收货人</li>
                                    <li>实付款</li>
                                    <li>定制收货人</li>
                                    <li>交易状态</li>
                                    <li>操作</li>
                                </ul>
                            </div>
                            <div class="checkAll">
                                <span class="checkbox"></span> 全选
                                <button class="checkAll_btn"> 合并付款 </button>
                            </div>
                            <div class="orderList_item" v-for="(order,oindex) in orderData">
                                <div class="orderList_item_title">
                                    <span class="checkbox"></span>
                                    <span class="date"> {{order.createTime}}</span>
                                    <span class="number">订单编号：{{order.orderNumber}}</span>
                                    <span class="goods_name">{{order.shopName}}<i class="icon-login_qq"></i></span>
                                </div>
                                <div class="orderList_item_con"  v-for="(product,pindex) in order.orderProducts">
                                    <ul class="clear">
                                        <li>
                                            <div class="goods_img">
                                                <img :src="product.picImg" alt="">
                                            </div>
                                            <div class="goods_name">
                                                <p>{{product.name}}</p>
                                            </div>
                                        </li>
                                        <li class="price">￥{{product.productPrice}}</li>
                                        <li class="number">{{product.buyNumber}}</li>
                                        <li class="name">{{order.userName}}</li>
                                        <li class="price1">￥{{product.productAmount}}</li>
                                        <li></li>
                                        <li class="cursor">
                                            <p v-if="order.orderStatus == 1">等待付款</p>
                                            <p v-if="order.orderStatus == 4">等待收货</p>
                                            <p v-if="order.orderStatus == 6">已完成</p>
                                            <p v-if="order.orderStatus == 11">取消订单</p>
                                            <p v-if="order.orderStatus == 12">自动关闭</p>
                                            <p @click="getOrderInfo(order.orderId)">订单详情</p>
                                            <p v-if="order.orderStatus != 1 && order.orderStatus != 11 && order.orderStatus != 12">物流信息</p>
                                        </li>
                                        <li>
                                            <div class="groups">
                                                <a href="javascript:;" class="btns" v-if="order.orderStatus == 1" @click="buyOrder(order.orderPayNumber)">付款</a>
                                                <a href="javascript:;" class="btns" @click="clearOrder(order.orderNumber)" v-if="order.orderStatus == 1">取消订单</a>
                                                <a href="javascript:;" class="btns" @click="okOrder(order.orderNumber)" v-if="order.orderStatus == 2 || order.orderStatus == 4 ">确认收货</a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <common-page :current="current" :all="countSize" @btn-click="listen"></common-page>
                    </div>
                    <!-- tab2 end -->

                    <div class="divTab shop_tabs" v-show="nowIndex===2">
                        <div class="search-top">
                            <input class="input_top" type="text" placeholder="商品名称或订单号">
                            <button class="btn-search">订单搜索</button>
                        </div>
                        <div class="orderList_list">
                            <div class="orderList_title">
                                <ul class="clear">
                                    <li>商品</li>
                                    <li>商品价格</li>
                                    <li>数量</li>
                                    <li>面料收货人</li>
                                    <li>实付款</li>
                                    <li>定制收货人</li>
                                    <li>交易状态</li>
                                    <li>操作</li>
                                </ul>
                            </div>
                            <div class="checkAll">
                                <span class="checkbox"></span> 全选
                                <button class="checkAll_btn"> 合并付款 </button>
                            </div>
                            <div class="orderList_item" v-for="(order,oindex) in orderData">
                                <div class="orderList_item_title">
                                    <span class="checkbox"></span>
                                    <span class="date"> {{order.createTime}}</span>
                                    <span class="number">订单编号：{{order.orderNumber}}</span>
                                    <span class="goods_name">{{order.shopName}}<i class="icon-login_qq"></i></span>
                                </div>
                                <div class="orderList_item_con"  v-for="(product,pindex) in order.orderProducts">
                                    <ul class="clear">
                                        <li>
                                            <div class="goods_img">
                                                <img :src="product.picImg" alt="">
                                            </div>
                                            <div class="goods_name">
                                                <p>{{product.name}}</p>
                                            </div>
                                        </li>
                                        <li class="price">￥{{product.productPrice}}</li>
                                        <li class="number">{{product.buyNumber}}</li>
                                        <li class="name">{{order.userName}}</li>
                                        <li class="price1">￥{{product.productAmount}}</li>
                                        <li></li>
                                        <li class="cursor">
                                            <p v-if="order.orderStatus == 1">等待付款</p>
                                            <p v-if="order.orderStatus == 4">等待收货</p>
                                            <p v-if="order.orderStatus == 6">已完成</p>
                                            <p v-if="order.orderStatus == 11">取消订单</p>
                                            <p v-if="order.orderStatus == 12">自动关闭</p>
                                            <p @click="getOrderInfo(order.orderId)">订单详情</p>
                                            <p v-if="order.orderStatus != 1 && order.orderStatus != 11 && order.orderStatus != 12">物流信息</p>
                                        </li>
                                        <li>
                                            <div class="groups">
                                                <a href="javascript:;" class="btns" v-if="order.orderStatus == 1" @click="buyOrder(order.orderPayNumber)">付款</a>
                                                <a href="javascript:;" class="btns" @click="clearOrder(order.orderNumber)" v-if="order.orderStatus == 1">取消订单</a>
                                                <a href="javascript:;" class="btns" @click="okOrder(order.orderNumber)" v-if="order.orderStatus == 2 || order.orderStatus == 4 ">确认收货</a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <common-page :current="current" :all="countSize" @btn-click="listen"></common-page>

                    </div>

                    <div class="divTab shop_tabs" v-show="nowIndex===3">
                        <div class="search-top">
                            <input class="input_top" type="text" placeholder="商品名称或订单号">
                            <button class="btn-search">订单搜索</button>
                        </div>
                        <div class="orderList_list">
                            <div class="orderList_title">
                                <ul class="clear">
                                    <li>商品</li>
                                    <li>商品价格</li>
                                    <li>数量</li>
                                    <li>面料收货人</li>
                                    <li>实付款</li>
                                    <li>定制收货人</li>
                                    <li>交易状态</li>
                                    <li>操作</li>
                                </ul>
                            </div>
                            <div class="checkAll">
                                <span class="checkbox"></span> 全选
                                <button class="checkAll_btn"> 合并付款 </button>
                            </div>
                            <div class="orderList_item" v-for="(order,oindex) in orderData">
                                <div class="orderList_item_title">
                                    <span class="checkbox"></span>
                                    <span class="date"> {{order.createTime}}</span>
                                    <span class="number">订单编号：{{order.orderNumber}}</span>
                                    <span class="goods_name">{{order.shopName}}<i class="icon-login_qq"></i></span>
                                </div>
                                <div class="orderList_item_con"  v-for="(product,pindex) in order.orderProducts">
                                    <ul class="clear">
                                        <li>
                                            <div class="goods_img">
                                                <img :src="product.picImg" alt="">
                                            </div>
                                            <div class="goods_name">
                                                <p>{{product.name}}</p>
                                            </div>
                                        </li>
                                        <li class="price">￥{{product.productPrice}}</li>
                                        <li class="number">{{product.buyNumber}}</li>
                                        <li class="name">{{order.userName}}</li>
                                        <li class="price1">￥{{product.productAmount}}</li>
                                        <li></li>
                                        <li class="cursor">
                                            <p v-if="order.orderStatus == 1">等待付款</p>
                                            <p v-if="order.orderStatus == 4">等待收货</p>
                                            <p v-if="order.orderStatus == 6">已完成</p>
                                            <p v-if="order.orderStatus == 11">取消订单</p>
                                            <p v-if="order.orderStatus == 12">自动关闭</p>
                                            <p @click="getOrderInfo(order.orderId)">订单详情</p>
                                            <p v-if="order.orderStatus != 1 && order.orderStatus != 11 && order.orderStatus != 12">物流信息</p>
                                        </li>
                                        <li>
                                            <div class="groups">
                                                <a href="javascript:;" class="btns" v-if="order.orderStatus == 1" @click="buyOrder(order.orderPayNumber)">付款</a>
                                                <a href="javascript:;" class="btns" @click="clearOrder(order.orderNumber)" v-if="order.orderStatus == 1">取消订单</a>
                                                <a href="javascript:;" class="btns" @click="okOrder(order.orderNumber)" v-if="order.orderStatus == 2 || order.orderStatus == 4 ">确认收货</a>
                                                <a href="javascript:;" class="btns" @click="appraiseOrder(order.orderId)" v-if="order.orderStatus == 6">评价</a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <common-page :current="current" :all="countSize" @btn-click="listen"></common-page>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../lib/js/vue.js"></script>
    <script src="../../lib/js/axios.min.js"></script>
    <!-- mock 数据 打包发布的时候记得移除 -->
    <script src="../../lib/js/mock.js"></script>
    <script src="../../js/all.min.js"></script>
    <script src="../../lib/js/elementui.min.js"></script>
    <script>
        orderList();
    </script>
</body>

</html>